<template>
    <view class="page fboxCol Ycenter">
        <view class="intr">
            <van-image v-if="detail.cover" class="pic" radius="6" fit="cover" :src="detail.cover" />
            <view class="title mt30 font28 ellipsis">{{detail.title}}</view>
            <view class="fboxRow Ycenter font24 mt20 info color-6264A3">
                <view class="fboxRow Ycenter flex1">发布人：{{detail.realName}} <view class="icon" v-if="detail.isAuth">实</view></view>
                <view class="date">{{detail.gmtApply}}</view>
            </view>
        </view>
        <template v-if="detail.companyLogo || detail.companyName || detail.authStatus">
            <view class="space"></view>
            <view class="company fboxRow Ycenter flex1">
                <van-image class="logo" radius="14" fit="cover" :src="detail.companyLogo" />
                <view class="name font32 color-000233 ellipsis">{{detail.companyName}}</view>
                <view class="icon" v-if="detail.authStatus">企</view>
            </view>
        </template>
        <view class="space"></view>
        <view class="box">
            <view class="hd font36 color-000233">合作详情</view>
            <view class="bd fboxCol Ycenter">
                <view v-for="(item, index) in content" :key="index">
                    <view class="pic" v-if="item.type == 'image'"><img :src="item.segContent" alt=""></view>
                    <view class="text font28" v-if="item.type == 'text'" v-html="item.segContent"></view>
                </view>
            </view>
        </view>
        <DownloadBtn/>
    </view>
</template>

<script>
    // 接口
    import {geCooperationDetails} from '@/api/h5.js'
    import DownloadBtn from "@/components/download-btn-h5/download_btn.vue";

    export default {
        components:{DownloadBtn},
        data() {
            return {
                detail: '',
                id: '',
                content: []
            };
        },
        created() {
            this.getDetails()
        },
        methods: {
            getDetails() {
                const { recruitId } = this.$route.query;
                geCooperationDetails({recruitId}).then(res => {
                    this.detail = res.data;
                    this.content = JSON.parse(res.data.content)
                    this.$store.commit('updateShare', {
                        title: res.data.title, // 分享标题
                        desc: res.data.content, // 分享描述
                        link: location.href, // 分享链接
                        imgUrl: res.data.cover
                    });
                })

            }
        }
    }
</script>

<style scoped>
    .page{padding: 30rpx 0;}
    .mt30{margin-top: 30rpx;}
    .color-6264A3{color:#6264A3}
    .color-000233{color:#000233}
    .icon{margin-left: 10rpx; width: 29rpx;height: 29rpx; line-height: 29rpx;text-align: center; background-color: #5280F6;font-size: 10rpx;color:#fff;border-radius: 10rpx;overflow: hidden;}
    .space{width: 750rpx;height: 16rpx;background: #F0F1F5;}
    .intr{padding: 0 0 30rpx;}
    .intr .pic{width: 690rpx;height: 360rpx;background: #202540;border-radius: 12rpx;overflow: hidden;}
    .company{padding: 30rpx; width: 690rpx;}
    .company .logo{margin-right: 20rpx; width: 88rpx;height: 88rpx;background: #F5F5FA;border-radius: 28rpx;}
    .company .name{width: 500rpx;height: 88rpx;background: #F5F5FA;border-radius: 28rpx;}
    .box{padding: 30rpx; width: 690rpx;}
    .box .pic{margin-top: 30rpx; width: 690rpx;overflow: hidden;}
    .box .pic img{width: 690rpx;border-radius: 12rpx;overflow: hidden;}
    .box .text{margin-top: 30rpx; width: 690rpx;color:#121575}
    

</style>

